<script setup>
import { ref, reactive, watch } from "vue";
import { onShow, onReachBottom } from "@dcloudio/uni-app";
import { request } from "../../../common/http";
import { ApiUrl } from "../../../common/ApiUrl";
import { Toast, jumpPage } from "@/utils";
import { getFormattedCurrentDate, millisToDateString } from "@/utils/date";
import NavBar from "../../components/NavBar.vue";

const state = reactive({
	navHeight: 0,
	params: {
		/* 当前登录的用户ID */
		userId: null,
		/* 投诉内容关键词 */
		content: "",
		/* 投诉状态 0：未处理 1：已处理 */
		status: 0,
		/* 查询起始时间 格式示例：2023-08-02 01:56:45 */
		startTime: getFormattedCurrentDate(3),
		/* 查询结束时间 格式示例：2023-08-02 01:56:45 */
		endTime: getFormattedCurrentDate(4),
		/* 当前页码 */
		pageNum: 1,
		/* 每页显示数量 */
		pageSize: 10,
		/* 总共有多少页 */
		pageCount: 1,
	},
	/* 当前登录的用户信息 */
	userInfo: {},
	/* 未处理的投诉数量 */
	unDoneComplaints: 0,
	/* 用户投诉列表 */
	userComplaintsList: [],
	/* 投诉时间弹窗-开始 */
	showStartTime: false,
	/* 投诉时间弹窗-结束 */
	showEndTime: false,
	/* 筛选弹窗 */
	filterPopup: false,
})
	
onShow(() => {
	const user = JSON.parse(uni.getStorageSync("user"));
	state.userInfo = user.userInfo;
	state.params.userId = state.userInfo.id;
	/* 查询用户投诉列表 */
	getUserComplaintsList();
	/* 查询未处理投诉数量 */
	getUnDoneComplaints();
})

/* 上拉加载 */
onReachBottom(() => {
	state.params.pageNum++;
	if (state.params.pageNum < state.params.pageCount + 1 && (state.params.pageCount != 1)) {
		/* 查询用户投诉列表 */
		getUserComplaintsList();
	} else {
		/* 没有数据了 */
	}
})

/* 投诉内容搜索框搜索按钮点击事件 */
const handleSearch = () => {
	if (!state.params.content) return Toast("请先输入搜索内容");
	state.userComplaintsList = [];
	/* 查询用户投诉列表 */
	getUserComplaintsList();
}

/* 待处理/已处理按钮点击事件 */
const handleStatus = (status) => {
	state.params.status = status;
}

/* 筛选弹窗重置按钮点击事件 */
const handleFilterPopupReset = () => {
	state.params.status = 0;
	state.params.startTime = getFormattedCurrentDate(3);
	state.params.endTime = getFormattedCurrentDate(4);
	state.filterPopup = false;
	/* 查询用户投诉列表 */
	getUserComplaintsList();
}

/* 筛选弹窗完成按钮点击事件 */
const handleFilterPopupConfirm = () => {
	state.filterPopup = false;
	state.params.pageNum = 1;
	state.userComplaintsList = [];
	/* 查询用户投诉列表 */
	getUserComplaintsList();
}

const handleTime1Confirm = (e) => {
	console.log(e);
	state.params.startTime = millisToDateString(e.value, 2);
	/* 关闭开始时间弹窗 */
	state.showStartTime = false;
}

const handleTime2Confirm = (e) => {
	state.params.endTime = millisToDateString(e.value, 2);
	/* 关闭开始时间弹窗 */
	state.showEndTime = false;
}

/* 图片预览 */
const handlePreviewImage = (images, index) => {
	uni.previewImage({
		current: index,
		urls: images
	})
}

/* 处理用户投诉 */
const handleDealComplaints = (item, index) => {
	if ([0, 'null', null].includes(item.handleStatus)) {
		request({
			url: `${ApiUrl.getDealComplaints}`,
			method: "post",
			data: {
				handleType: 1,
				id: item.id,
				userId: state.params.userId
			}
		}).then(res => {
			if (res.code === 200) {
				Toast("已处理", "success");
				state.params.pageNum = 1;
				state.userComplaintsList = [];
				/* 查询用户投诉列表 */
				getUserComplaintsList();
				/* 查询未处理投诉数量 */
				getUnDoneComplaints();
				// item.handleStatus = 1;
				// state.userComplaintsList[index] = item;
			} else {
				Toast(res.message, "error");
			}
		})
	}
}

/* 查询用户投诉列表 */
const getUserComplaintsList = () => {
	request({
		url: `${ApiUrl.getUserComplaintsList}`,
		method: "post",
		data: {
			...state.params
		}
	}).then(res => {
		if (res.code === 200) {
			const { list, pages } = res.data;
			state.userComplaintsList = list;
			state.params.pageCount = pages;
		} else {
			Toast(res.message, "error");
		}
	})
}

/* 查询未处理投诉数量 */
const getUnDoneComplaints = () => {
	request({
		url: `${ApiUrl.getUnDoneComplaints}`,
		method: "post",
		data: {
			userId: state.params.userId,
			// startTime: state.params.startTime,
			// endTime: state.params.endTime,
			// content: state.params.content
		}
	}).then(res => {
		if (res.code === 200) {
			state.unDoneComplaints = res.data;
		} else {
			Toast(res.message, "error");
		}
	})
}

/* 监听投诉内容搜索框 */
watch(() => state.params.content, (val) => {
	if (!val) {
		state.params.pageNum = 1;
		state.userComplaintsList = [];
		/* 查询用户投诉列表 */
		getUserComplaintsList();
	}
})
</script>

<template>
	<view class="customer_complaints">
		<NavBar v-model:navHeight="state.navHeight">
			<template v-slot:center>
				<view class="search">
				  <view class="input">
				    <image class="icon" src="/static/image/navbar/search.png" mode="widthFix" @click="handleSearch"/>
				    <input v-model.trim="state.params.content" placeholder="请输入搜索内容" />
				  </view>
					<view class="filter" @click="state.filterPopup = true">
						<image src="/static/image/navbar/filter.png" mode="aspectFill" />
						<text>筛选</text>
					</view>
				</view>
			</template>
		</NavBar>
		<view class="complaints_content">
			<view class="appeal">
				<view>申诉处理（{{ state.unDoneComplaints }}）</view>
				<view>请核实并在3天内处理投诉，若长时间不处理，将影响支付的相关功能使用。</view>
			</view>
			<view v-if="state.userComplaintsList.length > 0" class="complaints_list">
				<view class="complaints_item" v-for="(item, index) in state.userComplaintsList" :key="item.id">
					<view class="head">
						<view class="machine_no">设备编号：{{ item.machineNo }}</view>
						<view class="status" :class="{ 'processed': ![0, 'null', null].includes(item.handleStatus) }">{{ [0, 'null', null].includes(item.handleStatus) ? "待处理" : "已处理" }}</view>
					</view>
					<view class="middle">
						<view class="row">
							<text>设备状态：</text>
							<text>{{ item.machineException }}</text>
						</view>
						<view class="row">
							<text>出货单号：</text>
							<text>{{ item.saleId }}</text>
						</view>
						<view class="row">
							<text>商品状态：</text>
							<text>{{ item.outGoodsException }}</text>
						</view>
						<view class="row">
							<text>支付单号：</text>
							<text>{{ item.saleId }}</text>
						</view>
						<view class="row">
							<text>客户名称：</text>
							<text>{{ item.customerName }}</text>
						</view>
						<view class="row">
							<text>联系方式：</text>
							<text>{{ item.mobile }}</text>
						</view>
						<view class="row">
							<text>投诉内容：</text>
							<text>{{ item.remarks }}</text>
						</view>
						<view class="row">
							<text>时间：</text>
							<text>{{ item.complaintsTime }}</text>
						</view>
						<view class="pic_list">
							<image v-for="(pic, picIndex) in item.picList" :key="picIndex" :src="pic" mode="aspectFill" @click.self="handlePreviewImage(item.picList, picIndex)"></image>
						</view>
					</view>
					<view v-if="[0, 'null', null].includes(item.handleStatus)" class="bottom" @click="handleDealComplaints(item, index)">
						<text>处理</text>
					</view>
				</view>
			</view>
			<view v-else class="no_data">暂无数据</view>
		</view>
		
		<!-- 筛选弹窗 -->
		<u-popup :show="state.filterPopup" mode="top">
			<view class="filter_popup">
				<view class="title">
					<text>筛选</text>
					<image src="/static/image/icon_close.png" mode="aspectFill" @click="state.filterPopup = false"/>
				</view>
				<view class="status">
					<view class="status_title">处理状态</view>
					<view class="status_list">
						<view :class="{ 'active': state.params.status === 0 }" @click="handleStatus(0)">待处理</view>
						<view :class="{ 'active': state.params.status === 1 }" @click="handleStatus(1)">已处理</view>
					</view>
				</view>
				<view class="time">
					<view class="time_title">投诉时间</view>
					<view class="time_slot">
						<view @click="state.showStartTime = true">{{ state.params.startTime }}</view>
						<text>-</text>
						<view @click="state.showEndTime = true">{{ state.params.endTime }}</view>
					</view>
				</view>
				<view class="filter_footer">
					<text @click="handleFilterPopupReset">重置</text>
					<text @click="handleFilterPopupConfirm">完成</text>
				</view>
			</view>
		</u-popup>
		<u-datetime-picker
			:show="state.showStartTime"
			v-model="state.params.startTime"
			:minDate="-28800000"
			:maxDate="4102415999000"
			@cancel="state.showStartTime = false"
			@confirm="handleTime1Confirm" />
		<u-datetime-picker
			:show="state.showEndTime"
			v-model="state.params.endTime"
			:minDate="-28800000"
			:maxDate="4102415999000"
			@cancel="state.showEndTime = false"
			@confirm="handleTime2Confirm" />
  </view>
</template>

<style lang="scss">
	.customer_complaints {
		min-height: 100vh;
		position: relative;
		background: #F8F9FB;
		box-sizing: border-box;
		padding-top: calc(v-bind('state.navHeight') * 1px);
		.m-nav {
			.nav {
				.center {
					left: unset !important;
					transform: translate(10%, -50%) !important;
					.search {
						.filter {
							display: flex;
							align-items: center;
							image {
								width: 32rpx;
								height: 32rpx;
								margin: 0 6rpx 0 24rpx;
							}
							text {
								font-size: 24rpx;
								color: #FF9832;
								line-height: 32rpx;
							}
						}
					}
				}
			}
		}
		.complaints_content {
			padding-top: 184rpx;
			.appeal {
				position: fixed;
				z-index: 99;
				top: calc(v-bind('state.navHeight') * 1px);
				width: 100%;
				background: #fff;
				box-sizing: border-box;
				padding: 24rpx 32rpx;
				view {
					&:nth-of-type(1) {
						font-weight: 500;
						font-size: 32rpx;
						line-height: 48rpx;
						color: #303030;
					}
					&:nth-of-type(2) {
						font-size: 24rpx;
						line-height: 32rpx;
						color: #FF4638;
						margin-top: 8rpx;
					}
				}
			}
			.complaints_list {
				padding-bottom: 24rpx;
				.complaints_item {
					width: 686rpx;
					background: #fff;
					box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EBEEF1;
					border-radius: 8rpx;
					margin: 0 auto 24rpx;
					.head {
						box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EBEEF1;
						padding: 22rpx 0;
						display: flex;
						justify-content: space-between;
						.machine_no {
						  position: relative;
						  font-size: 28rpx;
						  font-weight: bold;
						  margin-left: 34rpx;
						  &:before {
						    position: absolute;
						    left: -34rpx;
						    content: "";
						    width: 6rpx;
						    height: 40rpx;
						    background: #FF4638;
						    border-radius: 3rpx;
						  }
						}
						.status {
						  color: #FF9832;
						  font-size: 28rpx;
						  margin-right: 30rpx;
							&.processed {
								color: #25DFA5;
							}
						}
					}
					.middle {
						width: 100%;
						box-sizing: border-box;
						padding: 22rpx 34rpx 32rpx;
						.row {
							&:not(:last-child) {
								margin-bottom: 12rpx;
							}
							text {
								font-size: 24rpx;
								line-height: 36rpx;
								color: #969699;
								&:nth-of-type(2) {
									color: #303030;
								}
							}
						}
						.pic_list {
							display: flex;
							flex-wrap: wrap;
							image {
								width: 140rpx;
								height: 140rpx;
								border-radius: 12rpx;
								margin: 12rpx 12rpx 0 0;
							}
						}
					}
					.bottom {
						width: 100%;
						height: 88rpx;
						background: #FFFFFF;
						box-shadow: inset 0rpx 1rpx 0rpx 0rpx #EBEEF1;
						border-radius: 0rpx 0rpx 8rpx 8rpx;
						box-sizing: border-box;
						padding-right: 30rpx;
						display: flex;
						align-items: center;
						justify-content: flex-end;
						text {
							width: 152rpx;
							height: 64rpx;
							background: linear-gradient( 129deg, #FF776A 0%, #FF4638 100%);
							border-radius: 32rpx;
							font-size: 28rpx;
							line-height: 33rpx;
							color: #FFFFFF;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}
			}
			.no_data {
				font-size: 24rpx;
				color: #929292;
				text-align: center;
				margin: 24rpx 0;
			}
		}
		.filter_popup {
			position: absolute;
			top: 160rpx;
			width: 750rpx;
			background: #fff;
			box-sizing: border-box;
			padding: 24rpx 40rpx 40rpx;
			.title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				text {
					font-size: 28rpx;
					line-height: 33rpx;
					color: #303030;
				}
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
			.status {
				margin: 24rpx 0;
				.status_title {
					font-weight: 500;
					font-size: 28rpx;
					line-height: 33rpx;
					color: #303030;
					margin: 0 0 16rpx;
				}
				.status_list {
					display: flex;
					view {
						width: 210rpx;
						height: 60rpx;
						background: #F6F6FB;
						border-radius: 4rpx;
						font-size: 24rpx;
						line-height: 28rpx;
						color: #646466;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 18rpx;
						&.active {
							background: rgba(#FF4638, 0.1);
							color: #FF4638;
						}
					}
				}
			}
			.time {
				.time_title {
					font-weight: 500;
					font-size: 28rpx;
					line-height: 33rpx;
					color: #303030;
					margin: 0 0 16rpx;
				}
				.time_slot {
					display: flex;
					align-items: center;
					margin-bottom: 36rpx;
					view {
						width: 314rpx;
						height: 60rpx;
						background: #F6F6FB;
						border-radius: 4rpx;
						font-size: 24rpx;
						line-height: 28rpx;
						color: #646466;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					text {
						font-size: 24rpx;
						line-height: 28rpx;
						color: #646466;
						margin: 0 12rpx;
					}
				}
			}
			.filter_footer {
				width: 100%;
				box-sizing: border-box;
				padding-right: 100rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				text {
					width: 152rpx;
					height: 64rpx;
					border-radius: 32rpx;
					border: 2rpx solid #000000;
					font-size: 28rpx;
					line-height: 33rpx;
					color: #000000;
					display: flex;
					align-items: center;
					justify-content: center;
					box-sizing: border-box;
					&:nth-of-type(2) {
						background: linear-gradient( 129deg, #FF776A 0%, #FF4638 100%);
						color: #fff;
						margin-left: 76rpx;
						border: unset;
					}
				}
			}
		}
	}
</style>